<template>
  <div class="productorContainer">
    <ul class="prod_ul">
      <li class="prod_item" v-for="item in goodsList" :key="item.id" @click="gotoDetal(item.id)">
        <img
          :src="item.list_pic_url"
          alt=""
          width="100%"
          style="display:block"
        />
        <div class="prod_dsc">{{ item.name }}</div>
        <div class="prod_price">{{ item.retail_price | priceFormat }}</div>
      </li>
    </ul>
  </div>
</template>
<script>
import { priceFormat } from "@/Filter/filter";
export default {
  props: ["goodsList"],
  data() {
    return {
      imgSrc: require("@/assets/logo.png"),
    };
  },
  methods:{
    gotoDetal(id){
      this.$router.replace('/detal?id='+id)
    }
  }
};
</script>

<style lang="less" scoped>
.productorContainer {
  height: 100%;
  .prod_ul {
    padding: 2% 2%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .prod_item {
      margin-bottom: 2%;
      width: 49%;
      text-align: center;
      background-color: #fff;
      .prod_dsc {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        padding: 0.1rem 0;
      }
      .prod_price {
        font-size: 0.14rem;
        color: #f30;
        margin-bottom: 0.1rem;
      }
    }
  }
}
</style>
